<template>
    <div class="box">
         <header>
         <i @click="back" class="iconfont">&#xe663;</i>
         <p>收银台</p>
         
     </header>
     <div class="ding">
         <dl style="display:flex;margin-left:29vw"><p>支付剩余时间</p><van-count-down @finish="end" format="mm:ss" :time="time" /></dl>
         <p style="font-size:13px;margin:2vw 0;">￥<span style="font-size:18px">{{zong}}</span></p>
         <i style="font-size:12px;color:gray;font-style:normal;">{{xiang.name}}</i>
     </div>
     <main>
         <div class="zhi">
             <div class="fei">
                 <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zhifubao"></use>
                </svg>
                 <em style="margin-top:.5vw;margin-left:.5vw">支付宝</em>
             </div>
             <van-switch v-model="checked" size="15px" />

         </div>
         <div class="zhi">
             <div class="fei">
                 <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-huabei"></use>
                </svg>
                 <em style="margin-top:.5vw;margin-left:.5vw">花呗</em>
             </div>
             <van-switch v-model="bool" size="15px" />

         </div>
         <div class="zhi">
             <div class="fei">
                 <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-weixin1"></use>
                </svg>
                 <em style="margin-top:.5vw;margin-left:.5vw">花呗</em>
             </div>
             <van-switch v-model="bool" size="15px" />

         </div>
     </main>
     <div class="password">
           <van-overlay :show="show" @click="show = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <p class="cha">
                         <i @click="cha($event)" style="font-size:18px" class="iconfont">&#xe621;</i>
                    </p>
                    <p style="margin-top:8vw;margin-bottom:1vw;font-size:15px">请输入支付密码</p>
                    <i style="font-style:normal;margin:2vw 0;">付款{{zong}}元</i>
                    <ul>
                        <li>{{array[0]}}</li>
                        <li>{{array[1]}}</li>
                        <li>{{array[2]}}</li>
                        <li>{{array[3]}}</li>
                        <li>{{array[4]}}</li>
                        <li style="border-right: 1px solid gray;">{{array[5]}}</li>
                    </ul>
                </div>
                <div class="shuru">
                    <ul @click="mi($event)">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li style="background-color:#eee"></li>
                        <li>0</li>
                        <li class="hou" style="background-color:#eee">
                            <i style="font-size:18px" class="iconfont">&#xe621;</i>
                        </li>
                    </ul>
                </div>
            </div>
            </van-overlay>
         </div> 
     <footer>
         <button @click="submit" v-show="!show">立即付款</button>
         
     </footer>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import {ajax_ding} from '../ajax/index'
export default {
    name: '',
    data(){
        return{
            checked:true,
            bool:false,
            value: '',
            show:false,
            showKeyboard: false,
            array:[],
            mima:'',
            food_Id:[],
            money:0,
             time: 1  * 60 * 1000,
        }
    },
    methods:{
      back(){
          this.$router.push('/trueDing')
      },
      submit(){
          this.show=true;
      },
      cha(e){
          if(e.target.tagName=='I'){
                this.show=false;
          }
          
      },

      mi(e){
        //   console.log(e.target);

         
          if(e.target.className=='hou'||e.target.tagName=='I'){
              this.array.pop();
            //   console.log(this.array)
          }else if(e.target.className!=='hou'&&e.target.tagName!=='I'){
                this.array.push(e.target.textContent);
          }

      },
      xiaDan(){
       
        //   console.log(this.array.join(''));
          ajax_ding({
              dingNum:this.car.length,
              food_id:JSON.stringify(this.food_Id),
              money:this.zong,
              address:this.users.address,
              phone:this.users.phone,
              Id:this.users.Id,
              mima:this.array.join('')
          }).then(data=>{
              if(data.code==1){
                 alert(data.msg);
              this.$store.commit('setCar',[])
              this.array=[]
              this.$router.push('/')
              }else{
                  alert(data.msg)
              }
              
          })
      },
      end(){
          this.$router.push('/trueDing')
      }
    },
    created(){
    //    console.log(this.users)
    },
    computed:{
        ...mapState(['car','users','xiang']),
        zong(){
            if(this.car.length>0){
                var money=0;
                // var user_Id=[];
                this.car.forEach(item => {
                    // this.money+=Math.floor(item.price)
                    money+=Math.floor(item.price);
                    this.food_Id.push(item.Id)
                });
                // console.log(money);
                return money;
            }
           
        },
        zhima(){
            this.array.forEach(item => {
                this.value+=item;
            });
            return this.value
        }
    },
    watch:{
        array(ne){
            if(ne.length==6){
                
                this.xiaDan(this.mima)
            }
        }
    }
}
</script>

<style scoped>
.box{
    height: 100vh;
    background-image: linear-gradient(white 14%,rgb(174, 0, 255) 30%,rgb(248, 247, 247) 50%);
}
header{
    position: relative;
    width: 100vw;
    padding: 2vh 0;
    text-align: center;
    color: white;
    background-image: linear-gradient(to left top,rgba(228, 100, 26, 0.884),rgba(174, 0, 255, 0.575),rgba(4, 0, 255, 0.747));
}
header>i{
  position: absolute;
  left: 5vw;
}
main{
    padding: 2vw;
    width: 96vw;
    margin: 0 auto;
}
main>div{
    width: 92vw;
    background-color: white;
    border-radius: 5px;
    padding: 6vw 2vw;
    margin-bottom: 2vw;
}
.zhi{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.zhi>.fei{
    display: flex;
}
.ding{
    width: 96vw;
    margin: 0 auto;
    padding: 2vw;
    text-align: center;
}
footer{
    position: fixed;
    bottom: 0;
    z-index: 1000;
}
footer button{
    border: 0;
    outline: 0;
    width: 100vw;
    padding: 5vw 0;
    font-weight: bolder;
    color: rgb(249, 250, 252);
    background-color: rgb(10, 243, 49);
}
/* footer>div{
    width: 100vw;
    position:absolute;
    bottom: 0;
} */

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 78vw;
    height:23vh;
    background-color: #fff;
    text-align: center;
    padding: 2vw;
    position: relative;
  }
  .block>.cha{
      position: absolute;
      padding: 1vw;
  }
  .block ul{
        width:80%;
        margin:2vw auto;
        display: flex;
        
  }
  .block ul>li{
      width:calc((100% - 7px)/6);
      height: 30px;
      border-left: 1px solid rgb(226, 221, 221);
      border-top: 1px solid rgb(245, 237, 237);
      border-bottom: 1px solid gray;
      text-align: center;
      line-height: 30px;
  }
  .block ul>li:last-child{
      border-right: 1px solid gray;
  }
  .shuru{
      position: fixed;
      bottom: 0;
      z-index: 10000;
  }
  .shuru>ul{
      width: 100vw;
      background-color: white;
      display: flex;
      flex-wrap: wrap;
      /* color: #eee; */
  }
  .shuru li{
      width:calc(33%);
      text-align: center;
      padding: 3.5vw 0;
      outline:1px solid rgb(240, 238, 238);
  }
</style>